<template>
    <div id="main">
          <div id="box">
              <div id="canvasBox"></div>
          </div>
          <div id="table">
            <table>
              <tr>
                <th style="width: 110px"></th>
                <th>货箱</th>
                <th>皮卡</th>
                <th>途瑞欧</th>
              </tr>
              <tr v-for="item in tableList">
                  <td>{{item.long}}</td>
                  <td>{{item.A1}}</td>
                  <td>{{item.A2}}</td>
                  <td>{{item.A3}}</td>
              </tr>
            </table>
          </div>
    </div>
</template>

<script type="text/javascript">
  function load(){

    let boxObj = document.getElementById('box');
    let canvasBox = document.getElementById('canvasBox');

    let boxW = boxObj.offsetWidth;
    let boxH = boxObj.offsetHeight;

    canvasBox.style.width  = boxW+'px';
    canvasBox.style.height = boxH+'px';

    let box = echarts.init(canvasBox);
    let option1 = {
      title: {
        x: 'center',
        text: '中转库进销存推移图',
        textStyle: {
          color: '#fff',
          fontSize: '30'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
            fontSize: '30'
          }
        }
      },
//      toolbox: {    //右上角图片下载
//        feature: {
//          dataView: {show: true, readOnly: false},
//          magicType: {show: true, type: ['line', 'bar']},
//          restore: {show: true},
//          saveAsImage: {show: true}
//        }
//      },
      color: ['#5086d6', '#f67c2b', '#a5a5a5'],
      legend: {
        left: 'right',
        data: ['下单', '提车', '未提'],
        textStyle: {
          color: '#fff'
        }
      },
      xAxis: [
        {
          type: 'category',
          data: ['11-1', '11-2', '11-3', '11-4', '11-5'],
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '数量',
          min: 0,
          max: 900,
          interval: 150,
          axisLabel: {
            formatter: '{value} 台',
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#464646'
            }
          }
        }
      ],
      series: [
        {
          name: '下单',
          type: 'bar',
          data: [500, 550, 400, 700, 600],
          barGap: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '提车',
          type: 'bar',
          data: [400, 650, 400, 500, 600],
          barGap: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        },
        {
          name: '未提',
          type: 'bar',
          data: [100, 150, 250, 450, 500],
          barGap: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
              }
            }
          }
        }
      ]
    };
    box.setOption(option1);
  };


      export default {
          name : 'three',
          data(){
              return {
                  tableList:[
                    {long:'1-10',A1:30,A2:22,A3:50},
                    {long:'11-30',A1:20,A2:4,A3:7},
                    {long:'31-60',A1:'',A2:'',A3:3},
                    {long:'60天以上',A1:1,A2:2,A3:''},
                  ]
              }
          },
          created: function(){
          },
          mounted : function(){
              load()
          },
          methods : {
          }
      }

</script>

<style type="text/css" scoped="true">
    #main {
      display: -webkit-flex;
      flex-direction: column;
      -webkit-flex-direction: column;
      height: 100%;
      width: 100%;
    }
    #box{
        -webkit-box-flex: 1 ;   /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: 1;       /* OLD - Firefox 19- */
        -webkit-flex: 1;        /* Chrome */
        -ms-flex: 1 ;            /* IE 10 */
        flex: 1;
      background-image: -webkit-radial-gradient(#737373,#2b2b2b);
      background-image: radial-gradient(#737373,#2b2b2b);
    }
    #table{
      -webkit-box-flex: 1 ;   /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1;       /* OLD - Firefox 19- */
      -webkit-flex: 1;        /* Chrome */
      -ms-flex: 1 ;            /* IE 10 */
      flex: 1;
      margin-top: 15px;
    }
    table{
      width: 100%;
      border-collapse:collapse;
    }
    th{
      background-color: #bdd7ee;
    }
    th,td{
      border: 1px solid #000;
      text-align: center;
      padding: 10px 0;
    }
</style>
